<!DOCTYPE html>
<html>
<body>
<img = src=./i/eg_bulboff.gif id="lamp"><br />
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br />
<button onClick="throwdice();">Trow dice</botton>
<script>
function throwdice(){
	var dx = 50;
	var dy = 50;
	var drection = 'repeat';
	DrawSqure(dx,dy);
	dx=dx+150;
	DrawSqure(dx,dy);
	document.f.dx.value = dx;
	document.f.dy.value = dy;
}
function DrawSqure(dx,dy,drection){
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.clearRect(dx,dy,100,100);
	var img=document.getElementById("lamp");
	var pat=ctx.createPattern(img,drection);
	ctx.rect(dx,dy,100,100);
	ctx.fillStyle=pat;
	ctx.fill();
//ctx.strokeRect(dx,dy,100,100);
//ctx.fillRect(dx,dy,100,100);

}


</script>
<form name = "f">
Stage:<input name = "Squre" value="First "/>
dx:<input name = "dx" value= " "/>
dy:<input name = "dy" value=" "/>
</body>
</html>
